<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
</head>
<body>
	<!-- 回到顶部 -->
	<div class="topBtn">
		<a href="#top">
			<i class="fa fa-long-arrow-up"></i>
		</a>
	</div>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div class="Table" v-cloak id="top">
				<div class="TableRow" v-for="(el,index) in list">
					<a class="RowLeft" :href="'#'+el.id">{{el.name}}</a>
					<span class="RowRight">{{el.explain}}</span>
				</div>
			</div>
			<div>
				<h4 id="handleDom">动态操作DOM</h4>
				<pre>
	appendChild(node)
	removeChild(node)
	replaceChild(new,old)
	insertBefore(new,old)
					
	var ul =document.getElementsByTagName("ul");
	var oli =document.createElement("li");	//创建节点
	
	添加到页面(容器的尾部) appendChild()
	ul.appendChild(oli);
	
	头部添加
	ul.prepend(oli); 
	insertBefore() 放在头部	第一个参数为元素，第二个为添加的位置
	ul.insertBefore(sli,ul.childNodes[0])
	
	删除节点		removeChild()
	ul.removeChild()
	
	克隆节点		如果想克隆容器里面的属性和方法,则需要深拷贝
	var cli=ul.cloneNode(true);
	ul.appendChild(cli)				
				</pre>
			</div>
			<div>
				<h4 id="handleAttr">操作样式</h4>
				<pre>
	用js的style属性可以获得html标签的样式，但是不能获取非行间样式。
		解决方法：
	
		1.在IE下可以用currentStyle;
		2.在FF下用getComputedStyle;	
		3.然而，为了让其兼容，解决方法，封装成getStyle事件：
		//封装一个兼容性的获取元素样式的函数
	    //分析:哪个元素,哪个样式
	function getStyle(obj,attr){
		if(obj.currentStyle){
　　　　　　//IE
			return obj.currentStyle[attr];
		}else{
　　　　　　//FF
			return getComputedStyle(obj,false)[attr];
		}	
	}
	
	简写==>
	function getStyle(obj,arrt) {
		return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
	}	
			
			
	<span class="red">直接设置style的属性：</span>
	element.style.height = '100px';	
	element.style['text-align'] = '100px';
	
	<span class="red">直接设置属性（只能用于某些属性，相关样式会自动识别）：</span>
	element.setAttribute('height', 100);
	element.setAttribute('height', '100px');
	
	<span class="red">设置style的属性：</span>
	element.setAttribute('style', 'height: 100px !important');
	
	<span class="red">使用setProperty  如果要设置!important，推荐用这种方法设置第三个参数：</span>
	element.style.setProperty('height', '300px', 'important');
	
	<span class="red">改变class   比如JQ的更改class相关方法：</span>
	element.className = 'blue';
	element.className += 'blue fb';
	
	<span class="red">设置cssText：</span>
	element.style.cssText = 'height: 100px !important';
	element.style.cssText += 'height: 100px !important';
				</pre>
			</div>
			<div>
				<h4 id="rect">操作类名</h4>
				<div>能操控类名就不要使用行内样式,减少js对浏览器的损耗</div>
				<pre>
	let contain = document.createElement('div')	
	// 设置类名 className 只能设置一个 重复设置只是设置了最后一个
	contain.className = 'newClass'			
	
	// 	classList可以设置多个			
	add()  添加
	contain.classList.add("active")		
			
	remove()  删除
	contain.classList.remove("abc")
	
	contains() 判断是否包含元素，有责删除，没有就添加
	this.classList.contains("active")?this.classList.remove("active"):this.classList.add("active");
	toggle 针对单个元素进行使用	只传一个参数的时候和contains()性质差不多，但是加入第二个参数只有true和false，
	true是增加类名，false是去掉类名
	this.classList.toggle("active")
				</pre>
			</div>
			<div>
				<h4 id="classList">classList与从className</h4>
				<div>classList是从className发展出来的,className：可以单个类名的添加，classList：可以多个类名添加，往下看adds()方法</div>
				<pre>
	item() 支持一个参数，为类名的索引，返回对应的类名
	document.body.classList.item(0)
		body的第一个类名是..... 当item(i)下标超出个数时，返回null
	
	add() 支持一个类名字符串参数。表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略
	
	remove() 支持一个类名字符串参数。表示往类名列表中移除该类名
	
	toggle() 支持一个类名字符串参数。无则加勉，有则移除之意。若类名列表中有此类名，移除之，并返回false; 
	如果没有，则添加该类名，并返回true.
	
	contains() 支持一个类名字符串参数。表示往类名列表中是否包含该类名。
	有点对应jQuery中的hasClass方法，注意，这里的是contains而不是contain，后面有个s哦！
	
	adds方法，可以一次添加多个类名，多个类名以空格分隔：
		classList.adds("child1 child2 child3").toString(); // "a b c child1 child2 child3"
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js" type="text/javascript" charset="utf-8"></script>
	<!--定义数据-->
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: function () {
				return {
					list: [
						{ name: "动态操作DOM",id: "handleDom",explain: '对元素增删改'},
						{ name: "操作样式",id: "handleAttr",explain: ''},
						{ name: "操作类名",id: "rect",explain: 'add()/remove()/contains()'},
						{ name: "classList/className",id: "classList",explain: '两者区分'},
					]
				}
			},
		})
	</script>
</body>

</html>